<template>
  <div class="sidebar">
    <div class="logo-container">
      <img src="../assets/logo.png" alt="Suno Logo" class="logo-img" />
      <span class="logo-text">Suno 写歌</span>
    </div>
    <nav class="navigation">
      <ul>
        <li class="nav-item active">
          <span class="icon">🎵</span>
          <a href="#">音乐广场</a>
        </li>
        <li class="nav-item">
          <span class="icon">✨</span>
          <a href="#">创作中心</a>
        </li>
        <li class="nav-item">
          <span class="icon">📁</span>
          <a href="#">我的创作</a>
        </li>
        <li class="nav-item">
          <span class="icon">❤️</span>
          <a href="#">我的点赞</a>
        </li>
      </ul>
    </nav>
    <div class="separator"></div>
    <nav class="secondary-navigation">
      <ul>
        <li class="nav-item">
          <span class="icon">ℹ️</span>
          <a href="#">关于我们</a>
        </li>
        <li class="nav-item">
          <span class="icon">👑</span>
          <a href="#">会员订阅</a>
        </li>
        <li class="nav-item">
          <span class="icon">📞</span>
          <a href="#">联系我们</a>
        </li>
      </ul>
    </nav>
    <div class="user-section">
      <button class="login-button">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
};
</script>

<style scoped>
.sidebar {
  width: 240px;
  height: 100vh;
  background-color: #1a1a1a; /* 深灰色背景 */
  color: #ccc; /* 浅灰色文字 */
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 0 20px 20px 20px;
  margin-bottom: 20px;
}

.logo-img {
  width: 40px; /* 根据实际logo调整 */
  height: 40px;
  margin-right: 10px;
  background-color: #fff; /* 临时代替logo图片 */
  border-radius: 50%;
}

.logo-text {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
}

.navigation,
.secondary-navigation {
  flex-grow: 1;
}

.navigation ul,
.secondary-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.nav-item:hover {
  background-color: #333; /* 悬停效果 */
}

.nav-item.active {
  background-color: #2a2a2a; /* 选中效果 */
  border-left: 3px solid #f5a623; /* 橙色左边框 */
  padding-left: 17px;
}

.nav-item.active a,
.nav-item.active .icon {
  color: #fff; /* 选中时文字和图标变白 */
}

.nav-item .icon {
  margin-right: 15px;
  font-size: 1.1em;
  width: 20px; /* 固定图标宽度 */
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  color: #ccc;
  font-size: 0.95em;
}

.separator {
  height: 1px;
  background-color: #333;
  margin: 20px;
}

.user-section {
  padding: 20px;
  margin-top: auto; /* 将用户部分推到底部 */
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #f5a623; /* 橙色按钮 */
  color: #1a1a1a; /* 深色文字 */
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.2s ease;
}

.login-button:hover {
  background-color: #e49613; /* 悬停时颜色变深 */
}
</style>